import React from 'react';
import { Card, Typography, Badge } from 'antd';
import { Droppable } from 'react-beautiful-dnd';
import TaskCard from './TaskCard';
import { TaskColumn as TaskColumnType } from '../models/taskModels';

const { Title } = Typography;

interface TaskColumnProps {
  column: TaskColumnType;
  onEditTask: (task: any) => void;
  scrollToTask?: (taskId: string | number) => void;
}

// 简化的Droppable相关接口
interface SimpleDroppableProvided {
  innerRef: React.Ref<any>;
  droppableProps: any;
  placeholder: React.ReactNode;
}

interface SimpleDroppableStateSnapshot {
  isDraggingOver: boolean;
}

/**
 * 任务列组件
 * 展示单个状态列的所有任务卡片
 */
const TaskColumn: React.FC<TaskColumnProps> = ({ column, onEditTask, scrollToTask }) => {
  // 获取状态列的背景色
  const getColumnBgColor = (id: string) => {
    switch(id) {
      case 'todo':
        return 'bg-blue-50';
      case 'inProgress':
        return 'bg-orange-50';
      case 'done':
        return 'bg-green-50';
      default:
        return 'bg-gray-50';
    }
  };

  return (
    <Card 
      title={
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            {column.icon}
            <Title level={5} className="m-0 ml-2">
              {column.title}
            </Title>
          </div>
          <Badge 
            count={column.tasks.length} 
            style={{ 
              backgroundColor: column.id === 'todo' 
                ? '#1890ff' 
                : column.id === 'inProgress' 
                  ? '#fa8c16' 
                  : '#52c41a' 
            }}
          />
        </div>
      }
      className="h-full"
      headStyle={{ padding: '12px 16px', borderBottom: '2px solid', borderColor: column.id === 'todo' ? '#1890ff' : column.id === 'inProgress' ? '#fa8c16' : '#52c41a' }}
      bodyStyle={{ padding: '12px' }}
    >
      <Droppable droppableId={column.id}>
        {(provided: SimpleDroppableProvided, snapshot: SimpleDroppableStateSnapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            className={`min-h-[500px] rounded-md p-2 task-column ${
              snapshot.isDraggingOver ? getColumnBgColor(column.id) : ''
            }`}
          >
            {column.tasks.map((task, index) => (
              <TaskCard key={String(task.id)} task={task} index={index} onEditTask={onEditTask} scrollToTask={scrollToTask} />
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </Card>
  );
};

export default TaskColumn; 